<template>
    <div class="rider-orders">
      <div class="header">
        <i class="fa fa-angle-left" @click="goBack"></i>
        <h2>骑手订单</h2>
      </div>
  
      <div class="tabs">
        <button 
          :class="{ active: activeTab === 'pending' }" 
          @click="activeTab = 'pending'"
        >
          待接订单
        </button>
        <button 
          :class="{ active: activeTab === 'accepted' }" 
          @click="activeTab = 'accepted'"
        >
          已接订单
        </button>
      </div>
  
      <!-- 待接订单列表 -->
      <div v-if="activeTab === 'pending'" class="order-list">
        <div v-if="pendingOrders.length === 0" class="empty">
          暂无待接订单
        </div>
        <div 
          v-for="order in pendingOrders" 
          :key="order.orderId"
          class="order-item"
        >
          <button class="accept-btn" @click="acceptOrder(order.orderId)">接单</button>
          <div class="order-info">
            <div class="shop-name">{{ order.business.businessName }}</div>
            <div class="order-price">¥{{ order.orderTotal.toFixed(2) }}</div>
            <div class="order-details">
              <div v-for="item in order.list" :key="item.foodId" class="order-item-detail">
                {{ item.food.foodName }}×{{ item.quantity }}
                <span class="item-price">¥{{ item.food.foodPrice.toFixed(2) }}</span>
              </div>
            </div>
            <div class="order-status">待接单</div>
          </div>
        </div>
      </div>
  
      <!-- 已接订单列表 -->
      <div v-if="activeTab === 'accepted'" class="order-list">
        <div v-if="acceptedOrders.length === 0" class="empty">
          暂无已接订单
        </div>
        <div 
          v-for="order in acceptedOrders" 
          :key="order.orderId"
          class="order-item"
        >
          <div class="order-info">
            <div class="shop-name">{{ order.business.businessName }}</div>
            <div class="order-price">¥{{ order.orderTotal.toFixed(2) }}</div>
            <div class="order-details">
              <div v-for="item in order.list" :key="item.foodId" class="order-item-detail">
                {{ item.food.foodName }}×{{ item.quantity }}
                <span class="item-price">¥{{ item.food.foodPrice.toFixed(2) }}</span>
              </div>
            </div>
            <div class="order-status">{{ getStatusText(order.orderState) }}</div>
            <button
              v-if="order.orderState === 1"
              class="pickup-btn"
              @click="completeOrder(order.orderId)"
            >
              确认送达
            </button>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    name: 'RiderOrders',
    data() {
      return {
        activeTab: 'pending',
        pendingOrders: [],
        acceptedOrders: [],
        user: {},
      }
    },
    created() {
      this.user = this.$getSessionStorage('user');
      this.fetchPendingOrders();
      this.fetchAcceptedOrders();
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      fetchPendingOrders() {
        axios.get('/DeliverymanController/listNonAcceptedOrders')
          .then(response => {
            if (response.data.code === 200) {
              this.pendingOrders = response.data.result;
            } else {
              console.error('获取待接订单失败:', response.data.message);
            }
          })
          .catch(error => {
            console.error('获取待接订单失败:', error);
          });
      },
      fetchAcceptedOrders() {
        axios.get(`/DeliverymanController/listAcceptedOrderByDeliverymanId/${this.user.userId}`)
          .then(response => {
            if (response.data.code === 200) {
              this.acceptedOrders = response.data.result;
            } else {
              console.error('获取已接订单失败:', response.data.message);
            }
          })
          .catch(error => {
            console.error('获取已接订单失败:', error);
          });
      },
      acceptOrder(orderId) {
        this.$axios.put(`/DeliverymanController/OrdersAccepted/${orderId}/${this.user.userId}`)
          .then(response => {
            if (response.data.code === 200) {
              alert('接单成功');
              this.fetchPendingOrders();
              this.fetchAcceptedOrders();
            } else {
              alert('接单失败: ' + response.data.message);
            }
          })
          .catch(error => {
            console.error('接单失败:', error);
            alert('接单失败，请重试');
          });
      },
      completeOrder(orderNumber) {
        this.$axios.put(`/DeliverymanController/OrdersFinished/${orderNumber}`)
          .then(response => {
            if (response.data.code === 200) {
              alert('订单已完成');
              this.fetchAcceptedOrders();
            } else {
              alert('完成订单失败: ' + response.data.message);
            }
          })
          .catch(error => {
            console.error('完成订单失败:', error);
            alert('完成订单失败，请重试');
          });
      },
      getStatusText(status) {
        const statusMap = {
          0: '待接单',
          1: '已接单',
          2: '已完成'
        };
        return statusMap[status] || '未知状态';
      }
    }
  }
  </script>
  
  <style scoped>
  .rider-orders {
    padding: 10px;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .header {
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #01B0F2;
    color: white;
  }
  
  .header i {
    margin-right: 15px;
    font-size: 20px;
    cursor: pointer;
  }
  
  .header h2 {
    margin: 0;
    font-size: 18px;
  }
  
  .tabs {
    display: flex;
    margin: 15px 0;
    border-bottom: 1px solid #ddd;
  }
  
  .tabs button {
    flex: 1;
    padding: 10px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 16px;
    cursor: pointer;
  }
  
  .tabs button.active {
    border-bottom-color: #01B0F2;
    color: #01B0F2;
    font-weight: bold;
  }
  
  .order-list {
    margin-top: 10px;
  }
  
  .empty {
    text-align: center;
    padding: 20px;
    color: #999;
  }
  
  .order-item {
    display: flex;
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
  }
  
  .accept-btn {
    width: 60px;
    background-color: #01B0F2;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
  }
  
  .pickup-btn, .complete-btn {
    padding: 5px 10px;
    margin-top: 10px;
    background-color: #01B0F2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  
  .complete-btn {
    background-color: #4CAF50;
  }
  
  .order-info {
    flex: 1;
    padding: 10px;
  }
  
  .shop-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
  }
  
  .order-price {
    position: absolute;
    right: 15px;
    top: 10px;
    font-weight: bold;
    color: #ff6b00;
  }
  
  .order-details {
    margin-top: 10px;
    color: #666;
  }
  
  .order-item-detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }
  
  .item-price {
    color: #ff6b00;
  }
  
  .delivery-fee {
    margin-top: 5px;
    font-size: 14px;
  }
  
  .order-status {
    margin-top: 10px;
    text-align: right;
    color: #01B0F2;
    font-weight: bold;
  }
  </style>